// out: ../css/


// 导航栏
.bg-body-tertiary { 
    background-color: transparent !important;

    .navbar-collapse {
        //让该部分不占满整个宽度，只占用其中的部分宽度，仅靠内容撑开
        flex-grow: 0;
    }
    
}

// 轮播图
.carousel {

    @media (max-width: 768px) {
        .carousel-item {
            height: 250px;
        }
    }

    @media (min-width: 768px) {
        .carousel-item {
            height: 400px;
        }
    }
    
    @media (min-width: 992px) {
        .carousel-item {
            height: 500px;
        }
    }
    .carousel-item{
        background-size: cover;
        background-position: center 0;
    }

    .carousel-inner .carousel-item:nth-child(1) {
        background-image: url(../assets/uploads/banner_1.jpg);
    }
    
    
    .carousel-inner .carousel-item:nth-child(2) {
         background-image: url(../assets/uploads/banner_2.jpg);
    }
    
    .carousel-inner .carousel-item:nth-child(3) {
         background-image: url(../assets/uploads/banner_3.jpg);
    }
    
    .carousel-inner .carousel-item:nth-child(4) {
         background-image: url(../assets/uploads/banner_4.jpg);
    }
    
}

// 开源项目
.project{
    .title {
        margin-top: 60px;
        text-align: center;
    }
    .content {
        .row {
            div {
                margin-bottom: 10px;
                height: 200px;
                a {
                    // 块显示模式宽默认为父级宽度
                    display: block;
                    border-radius: 4px;
                    height: 100%;
                    transition: all .3s;
                    &:hover {
                        //y轴移动10px，同时添加阴影
                        transform: translateY(-10px);
                        box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
                    }
                }
                &:nth-child(1) a {
                    background-color: #70c3ff;
                }
                &:nth-child(2) a {
                    background-color: #fd6a7f;
                }
                &:nth-child(3) a {
                    background-color: #7f8ea0;
                }
                &:nth-child(4) a {
                    background-color: #89d04f;
                }
            }
        }
    }
}
